<template>
    <div class="goods-list">
        <div class="goods-item" v-for="item in goodsList" :for="item.id" @click="getInfo(item.id)">
            <div class="goods_photo">
                <img :src="item.img_url" alt="">
            </div>
            <div>
                <h1>{{ item.title }}</h1>
                <div class="info">
                    <div class="goods-price">
                        <span class="new">￥{{ item.sell_price }}</span>
                        <span class="old">￥{{ item.market_price }}</span>
                    </div>
                    <div class="sell">
                        <span>热卖中</span>
                        <span>剩{{ item.stock_quantity }}件</span>
                    </div>
                </div>
            </div>
        </div>

        <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
    export default {
        name: "GoodsList",
        data(){
            return{
                pageIndex:1,
                goodsList:[]
            }
        },
        created() {
            this.getGoodsList()

        },
        methods:{
            getGoodsList(){
                this.$http.get('api/getgoods?pageindex='+ this.pageIndex).then( result => {
                      if(result.body.status === 0){
                          this.goodsList = this.goodsList.concat(result.body.message)
                      }
                })
            },
            getMore(){
                this.pageIndex++
                this.getGoodsList()
            },
            getInfo(id){
                this.$router.push({name:"GoodsInfo",params:{id}})
            }
        }
    }
</script>

<style scoped lang="less">
    .goods-list {
        display: flex;
        flex-wrap: wrap;
        padding: 7px;
        justify-content: space-between;

        .goods-item {
            width: 49%;
            border: 1px solid #ccc;
            margin-bottom: 7px;
            box-shadow: 0 0 8px #ccc;
            /*
               因为图片一开始可能因为网速的原因，
               可能会出现图片还没加载出来，导致盒子内容挤在一起的情况
               所以设置最小高度，以提升用户体验
            */
            max-height: 279px;
            /*
               因为内容长度不同，所以盒子会有不同程度的高度
               此时又因为盒子是流式布局，所以盒子可能在下边会出现空白的区域
               因此在垂直的方向设置流式布局，并使用两端对齐的方式进行布局
            */
            display: flex;
            flex-direction: column;
            justify-content: space-between;


            img {
                width: 100%;
            }

            h1 {
                font-size: 14px;
            }

            .info {
                background-color: rgba(0,0,0,0.1);

                .goods-price {
                    .new {
                        font-size: 16px;
                        font-weight: 700;
                        color: red;
                    }

                    .old{
                        font-size: 10px;
                        text-decoration: line-through;
                        margin-left: 10px;
                    }
                }

                .sell {
                    display: flex;
                    justify-content: space-between;
                    font-size: 13px;
                }
            }
        }

    }
</style>